/**
 * 厦门大学计算机专业 | 前华为工程师
 * 专注《零基础学编程系列》  http://lblbc.cn/blog
 * 包含：Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙
 * 公众号：蓝不蓝编程
 */
<template>
  <div class="page-wrapper">
    <s-header :name="'登录'" :back="'/home'"></s-header>
    <div>
      <van-form>
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请输入用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请输入密码' }]"
        />
        <div class="button-row">
          <div class="button" @click="onLogin">登录</div>
          <div class="button margin-left" @click="onRegister">注册</div>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import sHeader from '@/components/MyHeader'
import { login, register } from '@/service/axios-services'
import { setStorage } from '@/common/js/utils'
import { useRouter } from 'vue-router'
export default {
  setup() {
    const router = useRouter()
    const state = reactive({
      username: '',
      password: ''
    })

    // 登录
    const onLogin = async () => {
      const { data } = await login({
        name: state.username,
        password: state.password
      })
      setStorage('token', data.token)
      router.push({ path: '/home' })
    }

    // 注册
    const onRegister = async () => {
      const { data } = await register({
        name: state.username,
        password: state.password
      })
      setStorage('token', data.token)
      router.push({ path: '/home' })
    }

    return {
      ...toRefs(state),
      onLogin,
      onRegister
    }
  },
  components: {
    sHeader
  }
}
</script>

<style>
.page-wrapper {
  font-size: 14px;
}
.button-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 20px;
}
.button {
  background-color: #ef3965;
  color: #fff;
  border-radius: 20px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 20px;
  padding-right: 20px;
}
.margin-left {
  margin-left: 10px;
}
</style>
